import React, { useState } from 'react';
import { Dropdown, Tooltip } from "antd";
import { SketchPicker } from 'react-color';
import styles from "./index.less"
import IconFont from '../IconFont';

function Colorpicker({ value, onChange, transparent, style = {} }) {


    return (
        <div className="center" style={{ ...style }}>
            <Dropdown placement="bottomLeft" overlay={<SketchPicker
                style={{ width: "100%" }}
                color={value}
                onChangeComplete={(color) => {
                    onChange(`rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${value == "transparent" ? 1 : color.rgb.a})`);
                }}
            />}>
                <div className={styles.color}>
                    <div style={{ backgroundColor: value }}>
                    </div>
                </div>
            </Dropdown>
            {
                transparent && <Tooltip title="取消背景" onClick={() => {
                    onChange("transparent")
                }}>
                    <div className={styles.transparent}>
                    </div>
                </Tooltip>

            }
        </div>
    );
}

export default Colorpicker;